<template>
  <el-table :data="userList" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180"/>
    <el-table-column prop="nick" label="昵称" width="180"/>
    <el-table-column prop="password" label="密码">
      <template #default="scope">
        <!-- {{scope.row.password}}  获取这一行的数据，-->
        ******
      </template>
    </el-table-column>

    <el-table-column prop="sex" label="性别"/>
    <el-table-column prop="phone" label="手机"/>
    <el-table-column prop="email" label="邮箱" width="190"/>
    <el-table-column prop="address" label="住址"/>
    <el-table-column prop="createTime" label="创建时间"/>
    <el-table-column prop="updateTime" label="修改时间"/>
    <el-table-column prop="updateTime" label="操作" width="190">
      <template #default="scope">
        <!--      <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
<!--        <el-button type="primary"  >编辑</el-button>-->
        <a href="/edit">编辑</a> &nbsp;&nbsp;
        <a href="/edit">删除</a>
<!--        <el-button type="danger" >删除</el-button>-->

      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {doGet} from "../http/httpRequest.js";
import {onMounted, ref} from "vue";

let userList = ref([]);

onMounted(() => {
  getData();
});

function toEdit(){
  alert("跳转到编辑页面")
}


function getData() {
  doGet('/api/users', {})
      .then(response => {
        //响应成功
        console.log(response);
        userList.value = response.data.data;
      })
      .catch(error => {
            // 处理错误情况
            console.log(error);
          }
      )
      .finally(function () {
        // 总是会执行
      });

}
</script>